
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>shop</title>
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/shop.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/dist/layui/layui.js" charset="utf-8"></script>
    <style>
        .hasPraise{
            color :#ff6633
        }
    </style>
</head>
<body>

<jsp:include page="../navigation/navigation.jsp"/>

<div class="body-content">
    <div class="breadcrumb">
        <a href="">苏州美食</a>
        >
        <a href="">${vo.shop.shopLabel}</a>
        >
        <a href="">${vo.shop.shopAdministrativeArea}</a>
        >
        <a href="">${vo.shop.shopBusinessArea}</a>
        >
        <span>${vo.shop.shopAddress}</span>
    </div>

    <div class="main">
        <div class="basic">
            <div class="basic-info">
                <h1 class="shop-name">
                    ${vo.shop.shopName}${vo.shop.shopAdministrativeArea}店
                </h1>
                <div class="brief-info">
                    <div class="test9" class="layui-inline" ></div>
                    <span class="reviewCount">
                                <b>${vo.shop.shopReviewAmount}</b>
                                条评论
                            </span>
                    <span class="avgPriceTitle">
                                人均:
                                <b>${vo.shop.shopAvgPrice}</b>
                            </span>
                </div>
                <div class="expand-info">
                    地址:
                    <span class="item" >
                        ${vo.shop.shopBusinessArea}${vo.shop.shopAddress}
                     </span>
                </div>
                <div class="expand-info">
                    电话:
                    <span class="item" >
                        ${vo.shop.shopDetTelno}
                            </span>
                </div>
                <div class="other">
                    营业时间:
                    <span> ${vo.shop.shopTime}</span>
                </div>
                <div class="action">
                    <a href="${pageContext.request.contextPath}/shop/${vo.shop.shopId}/review" class="write">
                        <i class="icon"></i>
                         写评论</a>
                    </a>
                    <div class="right-action">
                        <a href="javascript: ;"><i class="con"> </i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="promoinfo-wrapper">
            <div class="sales">
                <h2>促销活动</h2>
                <div class="group">
                    <div class="item">
                        <a href="" class="block-link">
                            <img src="../images/shop_img/purchase.jpg">
                            <p class="title">代金券1张</p>
                            <div class="price">
                                <em class="icon">￥</em>
                                <span class="price-now">18.00</span>
                                <del class="del-price">
                                    <em>￥</em>
                                    <span class="price-before">20</span>

                                </del>
                            </div>
                            <div class="sold-count">
                                已售
                                <span>1850</span>
                            </div>
                            <i class="tag">团</i>
                        </a>
                    </div>
                    <div class="item">
                        <a href="" class="block-link">
                            <img src="../images/shop_img/purchase.jpg">
                            <p class="title">代金券1张</p>
                            <div class="price">
                                <em class="icon">￥</em>
                                <span class="price-now">18.00</span>
                                <del class="del-price">
                                    <em>￥</em>
                                    <span class="price-before">20</span>

                                </del>
                            </div>
                            <div class="sold-count">
                                已售
                                <span>1850</span>
                            </div>
                            <i class="tag">团</i>
                        </a>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="item-small">
                        <a href="" class="item-small">
                            <i class="tag place">团</i>
                            <em class="icon">￥</em>
                            <span class="price-now">18.00</span>
                            <del class="del-price">
                                <em class="">￥</em>
                                <span class="price-before">20</span>

                            </del>
                            <span class="name">鸡头米桂花圆子汤</span>
                        </a>
                    </div>
                    <div class="item-small">
                        <a href="" class="item-small">
                            <i class="tag place">团</i>
                            <em class="icon">￥</em>
                            <span class="price-now">18.00</span>
                            <del class="del-price">
                                <em class="">￥</em>
                                <span class="price-before">20</span>

                            </del>
                            <span class="name">鸡头米桂花圆子汤</span>
                        </a>
                    </div>
                    <div class="item-small">
                        <a href="" class="item-small">
                            <i class="tag place">团</i>
                            <em class="icon">￥</em>
                            <span class="price-now">18.00</span>
                            <del class="del-price">
                                <em class="">￥</em>
                                <span class="price-before">20</span>
                            </del>
                            <span class="name">鸡头米桂花圆子汤</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="shoptabs-wrapper">
            <div class="shop-tabs">
                <h2 class="mod-title">
                    推荐菜
                </h2>
                <div class="shop-tab-recommend">
                    <ul>
                    <c:forEach var="dish" items="${vo.recommendedDishesList}">
                        <li class="item">
                            <img src="../images/shop_img/dishe01.jpg">
                            <p class="name">${dish.recDishesName}</p>
                            <span class="price"><em>￥</em><span>${dish.recDishesPrice}</span></span>
                        </li>
                    </c:forEach>

                    </ul>
                </div>
            </div>

        </div>
        <div class="comment">
            <div class="mod-comment">
                <h2>
                    网友评价
                    <span class="sub-title">
                                (3645)
                            </span>
                </h2>
                <div class="summaryfilter-wrapper">
                    <a href="javascript: ;" class="filter-item">
                        <i class="checkbox chekboxed"></i>
                        <span  class="J-filter-good">全部</span>
                    </a>
                    <a href="javascript: ;" class="filter-item">
                        <i class="checkbox"></i>
                        <span class="J-filter-good">图片</span>
                        <span class="count">(1800)</span>
                    </a>
                    <a  href="javascript: ;" class="filter-item">
                        <i class="checkbox"></i>
                        <span  class="J-filter-good">好评</span>
                        <span class="count">(1800)</span>
                    </a>
                    <a href="javascript: ;" class="filter-item">
                        <i class="checkbox"></i>
                        <span  class="J-filter-good">中评</span>
                        <span class="count">(1800)</span>
                    </a>
                    <a href="javascript: ;" class="filter-item">
                        <i class="checkbox"></i>
                        <span class="J-filter-good">差评</span>
                        <span class="count">(1800)</span>
                    </a>
                </div>
                <ul class="comment-list">

                    <c:forEach var="map" items="${vo.shopReviewCustomerMap}">
                        <li class="comment-item">
                            <!--   头像-->

                            <a href="" class="avatar">
                                <img src="${pageContext.request.contextPath}/${map.value.cusPicture}" class="head">
                                <img src="${pageContext.request.contextPath}/images/shop_img/vip.png" class="vip">
                            </a>
                            <!--    用户名-->
                            <div class="user-info">
                                <a href="">
                                    ${map.value.cusName}
                                </a>
                            </div>
                            <div class="content">
                                <div class="shop-info">
                                    <div class="test9" class="layui-inline" ></div>
                                    <span class="average">
                                            人均:
                                            <label>${map.key.reviewAvgPrice}</label>
                                            元
                                        </span>
                                </div>
                                <div class="info">
                                    <p class="desc">
                                            ${map.key.reviewText}
                                      </p>
                                </div>
                                <dl class="recommend-info">
                                    <dt>喜欢的菜:</dt>
                                    <dd>
                                        <span>阳澄湖大闸蟹</span>
                                        <span>散养草鸡汤</span>
                                    </dd>
                                </dl>
                                <div class="photos">
                                    <div>
                                        <img src="../images/shop_img/pingl01.jpg">
                                        <img src="../images/shop_img/pingl01.jpg">
                                        <img src="../images/shop_img/pingl01.jpg">
                                    </div>
                                </div>
                                <div class="misc-info">
                                        <span class="time">
                                            <fmt:formatDate value="${map.key.reviewTime}" pattern="yyyy-MM-dd HH:mm"/>
                                          </span>
                                    <div class="actions">

                                        <a class="praise" href="javascript: ;">
                                            <i class="i-praise"></i>
                                           <%-- <span class="praise-number" onclick="getPraise(this,${map.key.shopReviewId},${map.key.reviewPraise})">--%>
                                            <span class="praise-number"  >
                                                 <input type="hidden" value="${map.key.shopReviewId}"/>
                                                赞( <label class="pla">${map.key.reviewPraise}</label> )
                                            </span>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>



                    </c:forEach>






                </ul>
                <div id="demo0" class="m"></div>
            </div>

        </div>
    </div>
</div>
<jsp:include page="../navigation/footer.jsp"/>


<script>

    //事件冒泡 获得点赞按钮
    $(".comment-list").click(function (event){
        var ele = event.target;
        if(ele.className.indexOf("praise-number") !=-1){
            console.log("ele :" + ele.innerHTML);
            var reviewId =  ele.firstElementChild.value;
            var praiseCount =  ele.lastElementChild.innerText;
            console.log("评论id： " +reviewId);
            console.log("点赞数： " +praiseCount);

            getPraise(ele,reviewId,praiseCount);
        }
    })

    function getPraise(spanEle,reviewId,praiseCount) {

        console.log("评论id:" + reviewId);
        console.log("当前评论的点赞总数:" + praiseCount);

        var styleListArr = spanEle.classList;
        var hasPraise = false;

        for (var i = 0; i < styleListArr.length; i++) {
            console.log(styleListArr[i])
            if (styleListArr[i] == "hasPraise") { // 已经点赞，现在是取消点赞
                hasPraise = true;
            }
        }

        if (hasPraise) {
            praiseCount--;
            spanEle.lastElementChild.innerText = praiseCount;
            spanEle.classList.remove("hasPraise");
            //取消点赞
            var data ="recReviewId="+reviewId+"&praiseStatus=0&praiseCount="+praiseCount;
            var url = '${pageContext.request.contextPath}'+"/praise/cancle";
            $.post(
                 url,
                data,
                function (result){
                    console.log("取消后结果是：" + result);
                },
                "json"
            )
        } else {
            praiseCount++;
            spanEle.lastElementChild.innerText = praiseCount;
            spanEle.classList.add("hasPraise");
            var data ="recReviewId="+reviewId+"&praiseStatus=1&praiseCount="+praiseCount;
            var url = '${pageContext.request.contextPath}'+"/praise/save";
            //添加点赞
            $.post(
                url,
                data,
                function (result){
                    console.log("点赞后结果是：" + result);
                },
                "json"
            )


        }








        //1. 网页中 点赞数+1


        //2. 添加点赞

    }
</script>
</body>

</html>
